<template>
  <div class="caitainerBox">
    <div class="caitainer">
      <!-- <Navigation :Crumbs="lampCrumbs?lampCrumbs:Crumbs"></Navigation> -->
      <FaultHint class="FaultHint" ref="c1" v-if="isRouterAlive"></FaultHint>
      <div class="tb">
        <div class="query">
          <el-button size="small" @click="c1">系统悬浮窗</el-button>
        </div>
        <div class="title">运营策略</div>
        <el-table :data="strategy_table" style="width: 1424px;" border>
          <el-table-column type="index" width="80px" label="序号"></el-table-column>
          <el-table-column prop="name" label="名称"></el-table-column>
          <el-table-column prop="issueTime" label="下发时间"></el-table-column>
          <el-table-column prop="memo" label="描述" show-overflow-tooltip></el-table-column>
          <el-table-column label="已关联的组">
            <template slot-scope="scope">
              <div v-for="(item,index) in scope.row.devGroups" :key="index">{{item.name}}</div>
            </template>
          </el-table-column>
          <el-table-column label="下发">
            <template slot-scope="scope">
              <el-button size="small" @click="LowerHair(scope.row)">群组下发</el-button>
              <el-button size="small" @click="LowerHair_loop(scope.row)">指定下发</el-button>
            </template>
          </el-table-column>
          <el-table-column label="查看">
            <template slot-scope="scope">
              <span @click="details(scope.row)">详情</span>
            </template>
          </el-table-column>
        </el-table>
        <!-- 策略的详情查看 -->
        <div class="Mask" v-show="details_show">
          <div class="details_view">
            <i @click="Close" class="el-icon-close"></i>
            <div style="width:1418px; text-align:center; font-size:24px ">策略详情</div>
            <!-- 策略详情 -->
            <el-table :data="details_list.items" style="width: 1418px;" max-height="850" border>
            <el-table-column type="index" label="序号"></el-table-column>
            <el-table-column label="策略执行方式">
              <template slot-scope="scope">
                <span>   {{scope.row.dateSpan.type | mode}}  </span>
              </template>
            </el-table-column>
            <el-table-column   label="周循环">
              <template slot-scope="scope">
              <span v-for="(item,index) in scope.row.dateSpan.weekDays " :key="index">
               周{{scope.row.dateSpan.weekDays[index]==0?"天":scope.row.dateSpan.weekDays[index]}}
              </span>
              </template>
            </el-table-column>
            <el-table-column prop="dateSpan.startDate" label="开始日期"></el-table-column>
            <el-table-column prop="dateSpan.endDate" label="结束日期"></el-table-column>
                   <el-table-column label="开始时间">
              <template slot-scope="scope">
                <div
                  v-for="(itme,index) in scope.row.onTime.timePts"
                  :key="index"
                >{{itme |time}}</div>
              </template>
            </el-table-column>
           <el-table-column prop="onTime.bias" label="开启偏移时间">
              <template slot-scope="scope">
                  <div
                  v-for="(itme,index) in scope.row.onTime.timePts"
                  :key="index"
                >{{itme.bias}}</div>
              </template>
            </el-table-column>

           <el-table-column prop="onTime.brightness" label="亮度">
            <template slot-scope="scope">
                  <div
                  v-for="(itme,index) in scope.row.onTime.timePts"
                  :key="index"
                >{{itme.brightness}}</div>
              </template>
            </el-table-column>

            <el-table-column label="结束时间">
              <template slot-scope="scope">
                <div v-if="scope.row.offTime">
                  <div
                  v-for="(itme,index) in scope.row.offTime.timePts"
                  :key="index"
                >{{itme|time}}</div>
                </div>
              </template>
            </el-table-column>

              <el-table-column label="关闭偏移时间">
              <template slot-scope="scope">
                <div v-if="scope.row.offTime">
                  <div
                  v-for="(itme,index) in scope.row.offTime.timePts"
                  :key="index"
                >{{itme.bias}}</div>
                </div>
              </template>
            </el-table-column>


          <el-table-column prop="onTime.cct" label="色温">
                <template slot-scope="scope">
                  <div  v-if="scope.row.offTime">
                  <div  v-for="(itme,index) in scope.row.onTime.timePts"
                  :key="index"
                >{{itme.cct}}</div>
                </div>
              </template>
            </el-table-column>

            </el-table>
          </div>
        </div>
        <!-- 下发组 -->
        <div class="Mask1" v-show="xf_group">
          <div class="Lower_hair">
            <div class="Relation a">
              <div class="title">
                <span>请选择组</span>
                <i @click="Close" class="el-icon-close"></i>
              </div>
              <!-- <div class="names"><span>选择</span>  <span>名称</span> <span>描述</span>  </div> -->
              <div class="Relation_box">
                <div></div>
                <el-checkbox
                  :indeterminate="isIndeterminate"
                  v-model="checkAll"
                  @change="handleCheckAllChange"
                >全选</el-checkbox>
                <div style="margin: 15px 0;"></div>
                <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
                  <el-checkbox v-for="city in cities" :label="city" :key="city">{{city.name}}</el-checkbox>
                </el-checkbox-group>
              </div>
              <div class="btn_Lower_hair">
                <el-button @click="confirm_group">确认下发</el-button>
              </div>
            </div>
          </div>
        </div>
        <!-- 下发回路 -->
        <div class="Mask1" v-show="xf_loop">
          <div class="Lower_hair">
            <div class="Relation a">
              <div class="title">
                <span>请选择回路</span>
                <i @click="Close" class="el-icon-close"></i>
              </div>
              <div class="Relation_box">
                <el-checkbox
                  :indeterminate="isIndeterminate_loop"
                  v-model="checkAll_loop"
                  @change="handleCheckAllChange_loop"
                >全选</el-checkbox>
                <div style="margin: 15px 0;"></div>
                <el-checkbox-group
                  v-model="checkedCities_loop"
                  @change="handleCheckedCitiesChange_loop"
                >
                  <el-checkbox
                    v-for="city in cities_loop"
                    :label="city.id"
                    :key="city.id"
                  >{{city.name}}</el-checkbox>
                </el-checkbox-group>
              </div>
              <div class="btn_Lower_hair">
                <el-button @click="confirm_LowerHair_loop">确认下发</el-button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Navigation from "@/views/title";
import FaultHint from "@/components/FaultHint";
import Vue from "vue";
import JsonViewer from "vue-json-viewer";
import { mapState } from "vuex";
Vue.use(JsonViewer);
var cityOptions = [];
var cityOptions_loop = [];
export default {
  props: ["lampCrumbs"],
  components: {
    Navigation,
    FaultHint
  },

  computed: {
    ...mapState("boxList", ["PacketLoopID"])
  },
  filters: {
    mode(e) {
      if (e == "everyday") {
        return "每天模式";
      } else if (e == "daytoday") {
        return "指定时间";
      } else if (e == "weekloop") {
        return "指定星期";
      }
    },   time(e){
        if(e.type=="absolute"){
            return  e.time
        }else if(e.type=="sunrise"){
            return "日出"
        }else {
          return "日落"
        }
      }
  },
  data() {
    return {
      Crumbs: {
        router: [
          {
            value: "主控",
            path: "/distribution"
          },
          {
            value: "运行策略",
            path: "/BoxStrategy"
          }
        ],
        path: ["主控界面", "夜景照明系统", "运营策略"]
      },
      list: true,
      list1: false,
      checked: true,
      strategy_table: [],
      multipleSelection: [],
      details_list: [],
      details_show: false, //策略详情弹窗
      coantainer: {},
      popup: false,
      jsonData: {},
      CurrentItem: {}, //点击当前修改的那一项
      Relevance: [], //已经关联回路的分组
      Unrelated: [], //未关联的策略的分组
      Relation_Show: false, //修改策略弹窗
      id: null,
      // ________策略下发组________
      checkAll: false,
      checkedCities: [],
      cities: cityOptions,
      isIndeterminate: false,
      group_Lower_hair: {
        aptId: "",
        groupIds: []
        // loopsIds:[]
      },
      xf_group: false,
      // ——————————策略下发回路——————
      xf_loop: false,
      checkAll_loop: false,
      checkedCities_loop: [],
      cities_loop: [],
      isIndeterminate_loop: false,
      loop_Lower_hair: {
        aptId: "",
        loopIds: []
      },
      search: "",
      page: 1,
      size: 10,
      total: 0,
      isRouterAlive: true
    };
  },
  watch: {
    PacketLoopID(curVal, oldVal) {
      this.strategy_table = [];
      this.getStrategy();
    }
  },
  methods: {
    reload() {
      this.isRouterAlive = false;
      this.$nextTick(() => (this.isRouterAlive = true));
    },
    c1() {
      this.$refs.c1.ts = !this.$refs.c1.ts;
    },
    PlayStatus() {
      this.$refs.c1.opens();
    },
    console(){
       this.$refs.c1.close()
    },
    del() {
      this.$refs.c1.empty();
    },
    // ------------下发回路-----------
    handleCheckAllChange_loop(val) {
      // console.log();
      let arrId = [];
      let len = this.cities_loop.length;
      for (let i = 0; i < len; i++) {
        arrId.push(this.cities_loop[i].id);
      }
      this.checkedCities_loop = val ? arrId : [];
      this.isIndeterminate_loop = false;
    },
    handleCheckedCitiesChange_loop(value) {
      let checkedCount = value.length;
      this.checkAll_loop = checkedCount === this.cities_loop.length;
      this.isIndeterminate_loop =
        checkedCount > 0 && checkedCount < this.cities_loop.length;
    },
    // 请求当前策略下得回路
    LowerHair_loop(row) {
      this.checkAll_loop = false;
      this.isIndeterminate_loop = false;
      this.checkedCities_loop = [];
      this.loop_Lower_hair.aptId = row.id;
      this.$http
        .get("/api/threesuns/map/appointment/get", {
          params: {
            groupId: this.PacketLoopID
          }
        })
        .then(res => {
          // 可以挪到请求外面
          this.xf_loop = true;
          this.cities_loop = res.data.data.loops;
        })
        .catch(err => {
          this.$message.error(err.data.message);
        });
    },
    confirm_LowerHair_loop() {
      this.$refs.c1.empty();
      //  let loop_arr=[]
      //   for(var i=0;i< this.checkedCities_loop.length;i++){
      //       loop_arr.push(this.checkedCities_loop[i].id)
      //   }
      this.loop_Lower_hair.loopIds = this.checkedCities_loop;
      this.$http
        .post("/api/threesuns/map/appointment/send", this.loop_Lower_hair)
        .then(res => {
          this.xf_loop = false;
          if (res.data.code == "200") {
            this.$message.success(res.data.message);
          } else {
            this.$message.warning(res.data.message);
          }
        })
        .catch(err => {
          this.$message.error(error.data.message);
        });
    },
    // ________下发组________
    handleCheckAllChange(val) {
      this.checkedCities = val ? cityOptions : [];
      this.isIndeterminate = false;
    },
    handleCheckedCitiesChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.cities.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.cities.length;
    },
    // 确认下发组
    confirm_group() {
      this.$refs.c1.empty();
      let arr = [];
      let len = this.checkedCities.length;
      for (let i = 0; i < len; i++) {
        arr.push(this.checkedCities[i].id);
      }
      this.group_Lower_hair.groupIds = arr;
      this.$http
        .post("/api/threesuns/map/appointment/send", this.group_Lower_hair)
        .then(res => {
          this.xf_group = false;
          if (res.data.code == "200") {
            this.$message.success(res.data.message);
          } else {
            this.$message.warning(res.data.message);
          }
        })
        .catch(err => {
          this.$message.error(error.data.message);
        });
    },
    //策略下发
    LowerHair(val) {
      // this.reload();
      this.checkedCities = [];
      cityOptions = val.devGroups;
      this.cities = val.devGroups;
      this.group_Lower_hair.aptId = val.id;
      this.xf_group = true;
    },
    // 表格多选
    handleSelectionChange(val) {
      // this.multipleSelection = val;
    },
    gettable() {
      // this.$http.get("rem").then(res => {
      //   this.tableData3 = res.data;
      // });
    },
    // 对修改的josn字符串进行格式化
    details(e) {
      // console.log(e);
      this.details_show = true;
      this.details_list = JSON.parse(e.appointment);
      console.log(this.details_list);
    },
    // 搜索
    search_btn() {
      this.getStrategy();
    },
    handleCurrentChange(e) {
      this.page = e;
      this.getStrategy();
    },
    // 所有策略
    getStrategy() {
      this.$http
        .get("/api/threesuns/map/appointment/get", {
          params: {
            groupId: this.PacketLoopID
          }
        })
        .then(res => {
          this.strategy_table.push(
            res.data.data ? res.data.data : (this.strategy_table = [])
          );
          this.total = res.data.total;
        });
    },
    // 详情窗口关闭
    Close() {
      this.details_show = false;
      this.xf_group = false;
      this.xf_loop = false;
    }
  },
  created() {
    this.getStrategy();
  }
};
</script>
<style scoped>
@import url("../../../assets/css/table.css");
* {
  box-sizing: border-box;
}
.caitainerBox {
  height: 100%;
  overflow: hidden;
}
.caitainer {
  /* height: 100%; */
  position: relative;
}
.el-button--primary {
  border-color: #fff;
}

.tab {
  overflow: hidden;
  height: 100%;
  float: left;
  padding: 20px 60px;
}
.tab li {
  float: left;
  width: 90px;
  height: 30px;
  text-align: center;
  line-height: 30px;
}
.list {
  color: #fff;
}
.list1 {
  color: #fff;
}
.tab :hover {
  cursor: pointer;
}
.ipt {
  float: left;
  width: 498px;
  height: 30px;
  background: none;
  /* border: 1px solid #3883dbed; */
  margin-top: 20px;
  position: relative;
  margin-left: 118px;
}
.ipt i {
  position: absolute;
  top: 6px;
  left: 12px;
  color: #ccc;
}
.ipt input {
  width: 100%;
  height: 100%;
  border: none;
  outline: none;
  padding-left: 42px;
}
.query {
  width: 120px;
  height: 50px;
  border: 1px solid #fff;
  text-align: center;
  line-height: 46px;
  margin: 20px 0 30px 0;
  position: absolute;
  z-index: 99999;
  right: 0;
  top: 0;
}
.el-button {
  background-color: #1d938d;
  border: 1px solid #fff;
  padding: 7px 12px;
}
.slt {
  float: left;
  width: 118px;
  /* height: 70px; */
  height: 100%;
  margin-top: 20px;
  margin-left: 160px;
  position: relative;
}
/deep/ .slt .el-button {
  padding: 8px 20px;
  border-radius: 0;
  background-color: #1d938d;
}
.del {
  float: left;
  margin-left: 30px;
  margin-top: 20px;
  text-align: center;
  line-height: 30px;
  color: #fff;
  font-size: 14px;
}
/deep/ .del .el-button {
  padding: 8px 20px;
  border-radius: 0;
  background-color: #1d938d;
}

.del span {
  display: block;
  width: 100%;
  height: 100%;
}
.del :hover {
  cursor: pointer;
  color: #fff;
}
.tb {
  width: 1418px;
  margin: 20px auto;
  /* height:100%; */
  position: relative;
  padding-top: 115px;
}
.cell {
  text-align: center;
}

.details_view {
  color: #1d938d;
  margin: 60px auto;
}
.details_view > div {
  background-color: #0a7e7e;
  padding: 11px;
  color: #fff;
}
.details_view i {
  float: right;
  color: #fff;
  margin-right: 30px;
  font-size: 20px;
  margin-top: 15px;
}
.details_view :hover {
  cursor: pointer;
}
.details_view ul {
  height: 400px;
  padding-top: 10px;

  overflow-y: scroll;
}
.details_view li {
  padding: 10px;
  background-color: #ccc;
  margin-bottom: 10px;
  margin-left: 20px;
}
.details_view span {
  margin-right: 15px;
}
.Mask {
  /* position: absolute; */
  display: flex;
  width: 100%;
  top: 0px;
  left: 0;
  z-index: 5;
}

.tb:hover {
  cursor: pointer;
}
.uptate_Popup {
  /* background-color: #ccc; */
  /* height: 500px; */
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  position: absolute;
  top: 0;
  padding-top: 300px;
  left: 0;
  padding-left: 100px;
}
.uptate_Popup input {
  height: 30px;
  width: 200px;
}
.txt {
  width: 500px;
  height: 400px;
  display: inline-block;
  resize: none;
}
.json {
  display: inline-block;
  width: 500px;
  height: 400px;
  overflow-y: scroll;
}
.jsonData {
  height: 400px;
}
.el-icon-close {
  font-size: 30px;
  float: right;
  color: #fff;
  margin-top: -200px;
  margin-right: 50px;
}
.Relation_groups {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  padding-top: 100px;
}
.Relation_groups > b {
  font-size: 25px;
  color: #fff;
}
.Relation {
  width: 400px;
  height: 500px;
  background-color: #fff;
  float: left;
  margin-top: 149px;
  margin-left: 210px;
  background-color: #042321;
}
.title {
  height: 40px;
  line-height: 40px;
  background-color: #0a7e7e;
  font-size: 18px;
  color: #fff;
  text-align: center;
  border: 1px solid #fff;
  border-bottom: none;
  position: relative;
}
.Relation_box {
  height: 435px;
  overflow-y: scroll;
}
.Relation_box::-webkit-scrollbar {
  width: 4px;
}
.Relation_box::-webkit-scrollbar-track {
  /* background: #ccc; */
  background: #011615;
}
.Relation_box::-webkit-scrollbar-thumb {
  background: #ccc;
}
.Relation_box span {
  display: inline-block;
  width: 125px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  color: #fff;
}
.tips {
  height: 30px;
  border-bottom: 1px solid #fff;
}
.btn {
  width: 200px;
  margin: 600px auto;
}
.el-icon-close {
}
.el-button {
  padding: 4px 17px;
}
.names {
  height: 30px;
  line-height: 30px;
  color: #ffffff;
}
.names span {
  display: inline-block;
  width: 129px;
  text-align: center;
}
.btn_Lower_hair {
  width: 100px;
  margin: 25px auto;
}
.Mask1 {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  position: absolute;
  top: 0;
  z-index: 3;
  left: 0;
}
.a {
  width: 700px;
  height: 538px;
}
.title i {
  position: absolute;
  right: -28px;
  top: 205px;
  color: #fff;
  z-index: 99;
}
.block {
  text-align: center;
}

.FaultHint {
  position: absolute;
  top: 500px;
  right: 0px;
}
.el-button {
  padding: 8px 11px;
  color: #fff;
  border-radius: 5px;
}
.el-checkbox {
  width: 188px;
  text-align: left;
}
.el-checkbox + .el-checkbox {
  margin-left: 0;
}
.Lower_hair {
  overflow: hidden;
}
.Relation_box {
  padding-left: 80px;
}
.el-checkbox {
  margin-bottom: 8px;
}
</style>
